<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <link href="//unpkg.com/layui@2.8.18/dist/css/layui.css" rel="stylesheet">
    <script src="//unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <title>文件上传</title>
</head>

<body>
    <div class="upload">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M544 864V672h128L512 480 352 672h128v192H320v-1.6c-5.376.32-10.496 1.6-16 1.6A240 240 0 0 1 64 624c0-123.136 93.12-223.488 212.608-237.248A239.808 239.808 0 0 1 512 192a239.872 239.872 0 0 1 235.456 194.752c119.488 13.76 212.48 114.112 212.48 237.248a240 240 0 0 1-240 240c-5.376 0-10.56-1.28-16-1.6v1.6H544z"></path></svg>
        <!-- 设置多选、选择文件夹（不同内核进行适配） -->
        <div class="text">将目录或者多个文件拖拽到此处扫描</div>
    </div>
    <div class="btnbox">
        <button type="button" class="layui-btn selectBtn1">选择文件</button>
        <input class="fileInput fileInput1" type="file" accept="image/*" multiple/>
        <button type="button" class="layui-btn selectBtn2">选择文件夹</button>
        <input class="fileInput fileInput2" type="file" accept="image/*" multiple webkitdirectory mozdirectory odirectory/>
    </div>
    <div class="tablebox">
        <table class="layui-hide" id="ID-table-data"></table>
    </div>
    <div class="status">
        <span class="layui-badge-rim countAll">文件数量：0</span>
        <span class="layui-badge layui-bg-green successAll">成功上传：0</span>
        <span class="layui-badge-rim sizeAll">总大小：0</span>
    </div>
    <div class="submit">
        <button type="button" class="layui-btn uploadBtn">开始上传</button>
    </div>
    <div class="bottom"></div>
    <script src="//unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script src="./index.js"></script>
</body>

</html>